<template>
  <div class="waterfall p-1">
    <item v-for="(item, index) in data" :key="item.id" :data="item" :index="index">{{
      item.title
    }}</item>
  </div>
</template>

<script setup>
import item from './item.vue'
defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
.waterfall {
  column-count: 2;
  column-gap: 5px;
}
</style>
